<!-- 结构 -->
<script setup lang="ts">
import { ref } from 'vue';

const imgUrl = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
const msg = ref('百度图片')

const flag = ref(0)

</script>

<!-- JS逻辑 -->
<template>
    <div class="app-page">

        <div>
            <div class="box" :class="{ active: flag === 0 }" @click="flag = 0">选项1</div>
            <div class="box" :class="{ active: flag === 1 }" @click="flag = 1">选项2</div>
        </div>

        <hr>

        <img v-bind:src="imgUrl" v-bind:alt="msg">
        <img :src="imgUrl" :alt="msg">

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped>
.box {
    width: 200px;
    height: 80px;
    background-color: pink;
}

.active {
    background-color: palegreen;
    font-weight: bold;
    color: red;
}
</style>